import React, { Component } from "react";
import PropTypes from "prop-types";
import "./index.css";

export default class Footer extends Component {
  static propTypes = {
    todos: PropTypes.array.isRequired,
    checkedAll: PropTypes.func.isRequired,
    clearAllDone: PropTypes.func.isRequired
  };
  handleCheckAll = e => {
    const {
      target: { checked: done }
    } = e;
    this.props.checkedAll(done);
  };
  handleClearAll = () => {
    this.props.clearAllDone();
  };
  render() {
    const { todos } = this.props;
    const count = todos.length;
    const doneCount = todos.reduce((prev, next) => {
      const num = next.done ? 1 : 0;
      return prev + num;
    }, 0);
    return (
      <div className="footer">
        <div className="footer-fl">
          <input
            type="checkbox"
            checked={count === doneCount && count !== 0}
            onChange={this.handleCheckAll}
          />
          <span className="footer-fl_txt">
            已完成{doneCount}/全部{count}
          </span>
        </div>
        <div className="footer-btn" onClick={this.handleClearAll}>
          清空所有已完成
        </div>
      </div>
    );
  }
}
